<template>
  <view class="page">
    <view v-if="isLoadedDetail && !isExistedValidGatePass" class="no-valid-gate-pass-container">
      <view class="top-view">
        <text class="top-view-text">暂无有效的通行证</text>
      </view>
      <view class="arkwork-view">
        <u-icon size="280" name="/static/extAccess/img/artwork.png">
        </u-icon>
      </view>
      <view class="content-desc-view">
        <view class="content-desc-text-view">
          <text class="content-desc-text">申请未审核通过</text>
        </view>
        <view class="content-desc-text-view">
          <text class="content-desc-text">或</text>
        </view>
        <view class="content-desc-text-view">
          <text class="content-desc-text">不在通行时间内</text>
        </view>
      </view>
      <view class="bottom-button-view">
        <u-icon size="150" label-pos="bottom" margin-top="10" label="返回" @click="doNavigateBack"
          name="/static/extAccess/img/back.png">
        </u-icon>
      </view>
    </view>
    <template v-if="isLoadedDetail && isExistedValidGatePass">
      <view class="user-bar">
        <view class="user-avatar">
          <u-avatar :mode="uAvatarProps.mode" :size="160" :src="uAvatarProps.src" :text="uAvatarProps.text"
            :showLevel="uAvatarProps.showLevel" :showSex="false" :sexIcon="uAvatarProps.sexIcon"
            :bgColor='uAvatarProps.bgColor'></u-avatar>
        </view>
        <view class="user-name">
          {{gatePassInfo.visitorName}}
        </view>
        <view class="user-code">
          入校二维码
        </view>
      </view>

      <view class="text-lines">
        <view class="text-line">
          <view class="label">车辆信息</view>
          <view class="value primary">
            <text v-if="gatePassInfo.visitorDrive === 2">
              {{gatePassInfo.visitorPlateNumber}}
            </text>
            <text v-else>
              无
            </text>
          </view>
        </view>
        <view class="text-line">
          <view class="label">进入校区</view>
          <view class="value primary">
            {{gatePassInfo.enterCampusName}}
          </view>
        </view>
        <view class="text-line">
          <view class="label">访客单位</view>
          <view class="value primary">
            {{gatePassInfo.visitorCompany}}
          </view>
        </view>
        <view class="text-line-title">时间段</view>
        <view class="text-line">
          <view class="value">
            <view class="time-bar">
              <view class="time-item">{{gatePassInfo.startTime}}</view>
              <view class="text">至</view>
              <view class="time-item">{{gatePassInfo.endTime}}</view>
            </view>
          </view>
        </view>
        <view class="text-line">
          <view class="label">受访人</view>
          <view class="value primary">
            {{gatePassInfo.intervieweeName}}
          </view>
        </view>
        <view class="text-line">
          <view class="label">受访人单位</view>
          <view class="value primary">
            {{gatePassInfo.sfrspDeptName}}
          </view>
        </view>
      </view>
    </template>

    <!-- <view v-if="isLoadedDetail && isExistedValidGatePass" class="gatepass-container">
      <view class="gatepass-wrap">
        <view class="gatepass-title">访客通行证</view>
        <view class="gatepass-area">
          <u-avatar :mode="uAvatarProps.mode" :size="uAvatarProps.size" :src="uAvatarProps.src"
            :text="uAvatarProps.text" :showLevel="uAvatarProps.showLevel" :showSex="uAvatarProps.showSex"
            :sexIcon="uAvatarProps.sexIcon" :bgColor='uAvatarProps.bgColor'></u-avatar>
        </view>
      </view>
      <view>
        <u-card :border="true" :show-head="false" class="gatepass-card" style="margin: 8px 11px;" border-radius="20">
          <view slot="body">
            <u-grid class="gatepass-grid" :col="3" :border="false">
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">访客姓名</view>
                <view class="gatepass-grid-text-content">{{gatePassInfo.visitorName}}</view>
              </u-grid-item>
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">车辆信息</view>
                <view class="gatepass-grid-text-content">
                  <text v-if="gatePassInfo.visitorDrive === 2">
                    {{gatePassInfo.visitorPlateNumber}}
                  </text>
                  <text v-else>
                    无
                  </text>
                </view>
              </u-grid-item>
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">进入校区</view>
                <view class="gatepass-grid-text-content">{{gatePassInfo.enterCampusName}}</view>
              </u-grid-item>
            </u-grid>
          </view>
        </u-card>
      </view>
      <view style="display: flex;justify-content: space-between;">
        <u-card style="width: 40%;margin: 8px 11px;" :border="true" :show-head="false" class="gatepass-card"
          border-radius="20">
          <view slot="body">
            <u-grid class="gatepass-grid" :col="1" :border="false">
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">访客单位</view>
                <view class="gatepass-grid-text-content">{{gatePassInfo.visitorCompany}}</view>
              </u-grid-item>
            </u-grid>
          </view>
        </u-card>
        <u-card style="width: 55%;margin: 8px 11px;" :border="true" :show-head="false" class="gatepass-card"
          border-radius="20">
          <view slot="body">
            <u-grid class="gatepass-grid" :col="1" :border="false">
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">时间段</view>
                <view class="gatepass-grid-text-content">{{ gatePassInfo.startTime}}</view>
                <view class="gatepass-grid-text-content">{{ gatePassInfo.endTime}}</view>
              </u-grid-item>
            </u-grid>
          </view>
        </u-card>
      </view>
      <view>
        <u-card :border="true" :show-head="false" class="gatepass-card" style="margin: 8px 11px;" border-radius="20">
          <view slot="body">
            <u-grid class="gatepass-grid" :col="2" :border="false">
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">受访人</view>
                <view class="gatepass-grid-text-content">{{gatePassInfo.intervieweeName}}</view>
              </u-grid-item>
              <u-grid-item class="gatepass-grid-item" style="background-color: #FAFAFA;">
                <view class="gatepass-grid-text">受访人单位</view>
                <view class="gatepass-grid-text-content">{{gatePassInfo.sfrspDeptName}}</view>
              </u-grid-item>
            </u-grid>
          </view>
        </u-card>
      </view>
    </view> -->
  </view>
</template>

<script>
  import {
    validatenull
  } from '@/common/validate.js';
  import interceptMixin from '@/pages/extAccess/flow/visitor/mixins/interceptMixin.js';

  export default {
    mixins: [interceptMixin()],
    data() {
      return {
        gatePassInfo: {
          id: '',
          intervieweeName: '',
          intervieweePhone: '',
          startTime: '',
          endTime: '',
          enterCampus: '',
          enterCampusName: '',
          enterReason: '',
          visitorAvatar: '',
          visitorName: '',
          visitorSex: '',
          visitorPhone: '',
          visitorIdType: '',
          visitorIdTypeName: '',
          visitorIdNumber: '',
          visitorCompany: '',
          visitorDrive: 0,
          visitorPlateNumber: '',
          entourages: '',
          openId: '',
          sfrspDeptName: '',
        },
        uAvatarProps: {
          mode: 'circle', // circle square
          src: '',
          text: '', // 优先级比src高
          size: '500',
          showLevel: false,
          showSex: true,
          sexIcon: 'man',
          bgColor: '#5d8dfc'
        },
        // 数据是否已加载
        isLoadedDetail: false,
        // 是否存在有效的通行证
        isExistedValidGatePass: false,
      }
    },
    onLoad(params) {
      // onLoad 属于页面生命周期 路由跳转到当前组件才会执行到
    },
    created() {
      // created 属于组件生命周期
    },
    onReady() {
      // onReady 属于页面生命周期 路由跳转到当前组件才会执行到
    },
    mounted() {
      // mounted 属于组件生命周期
      this.initData();
    },
    methods: {
      initData() {
        // if(!this.isWechatMpLogin()) {
        // 	this.handleNotWechatMpLogin();
        // 	return;
        // }
        let id = this.$route.query.id;
        let openId = this.vuex_account;
        let params = {};
        if (id) {
          params.id = id;
        }
        if (openId) {
          params.openId = openId;
        }
        this.$u.api.wflow.business.visitorOuterNetApi.detailGatePass(params).then((res) => {
          Object.assign(this.gatePassInfo, res.data);
          this.setAvatarPropsSexIcon();
          this.parseVisitorAvatar();
          this.specialHandleStartEndTime(this.gatePassInfo);
          this.isLoadedDetail = true;
          if (res.data && res.data.id) {
            this.isExistedValidGatePass = true;
          }
        });
      },
      /**
       * 高版本IOS，日期格式（yyyy-mm-dd hh:MM）会出现NaN-NaN-NaN兼容性问题
       * 
       * 特殊处理开始时间与结束时间的格式
       * 
       * @param {Object} item
       */
      specialHandleStartEndTime(item) {
        let startTime = item.startTime;
        if (startTime) {
          startTime = startTime.substring(0, startTime.lastIndexOf(':'));
          item.startTime = startTime;
        }
        let endTime = item.endTime;
        if (endTime) {
          endTime = endTime.substring(0, endTime.lastIndexOf(':'));
          item.endTime = endTime;
        }
      },
      setAvatarPropsSexIcon() {
        let visitorSex = this.gatePassInfo.visitorSex;
        if (visitorSex === 1) {
          this.uAvatarProps.sexIcon = 'man';
        } else {
          this.uAvatarProps.sexIcon = 'woman';
        }
      },
      parseVisitorAvatar() {
        if (!validatenull(this.gatePassInfo.visitorAvatar)) {
          let visitorAvatar2Parse = JSON.parse(this.gatePassInfo.visitorAvatar);
          let avatarImgList = [];
          if (Array.isArray(visitorAvatar2Parse)) {
            visitorAvatar2Parse.forEach((item) => {
              let avatarImg = {};
              avatarImg['name'] = item.label;
              avatarImg['url'] = item.value;
              avatarImgList.push(avatarImg);
            });
          }
          if (avatarImgList.length > 0) {
            this.uAvatarProps.src = avatarImgList[0].url;
          }
        }
      },
      doNavigateBack() {
        let navigateBackUrl = this.$route.query.navigateBackUrl;
        if (navigateBackUrl) {
          this.$u.route({
            url: navigateBackUrl
          });
        } else {
          uni.navigateBack();
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .page {
    height: 100vh;
    padding-top: 344rpx;
    background: #579CFA url('../../../../static/images/access_idcard_bg.png') no-repeat;
    background-position: top center;
    background-size: 100% auto;
    overflow: auto;
  }

  .user-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24rpx 64rpx 24rpx 280rpx;
    margin-bottom: 80rpx;
  }

  .user-avatar {
    position: absolute;
    bottom: 0;
    left: 64rpx;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192rpx;
    height: 192rpx;
    border-radius: 50%;
    padding: 16rpx;
    background: #fff;
    overflow: hidden;

    image {
      width: 160rpx;
      height: 160rpx;
    }
  }

  .user-name {
    flex: 1;
    font-size: 44rpx;
    font-weight: 700;
    color: #000;
  }

  .user-code {
    border-radius: 64rpx;
    padding: 0 24rpx;
    line-height: 64rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #fff;
    background: #579CFA;
  }

  .text-lines {
    padding: 0 64rpx;
  }

  .text-line-title {
    margin-bottom: 16rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
  }

  .text-line {
    display: flex;
    align-items: flex-start;
    margin-bottom: 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;

    .label {
      margin-right: 32rpx;
      white-space: nowrap;
      font-weight: 700;
      color: #333;
    }

    .value {
      flex: 1;
    }

    .primary {
      color: #579CFA;
    }
  }

  .time-bar {
    display: flex;
    align-items: center;

    .text {
      margin: 0 16rpx;
      font-weight: 700;
      color: #333;
    }
  }

  .time-item {
    width: 50%;
    min-height: 88rpx;
    border-radius: 8rpx;
    line-height: 88rpx;
    text-align: center;
    background: #f7f7f7;
  }

  .no-valid-gate-pass-container {
    .top-view {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;

      .top-view-text {
        color: #ff0000;
        font-size: 38rpx;
        font-weight: bold;
      }
    }

    .arkwork-view {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .content-desc-view {
      margin-top: 60px;

      .content-desc-text-view {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;

        .content-desc-text {
          color: #7d8c9e;
          font-size: 31rpx;
        }
      }
    }

    .bottom-button-view {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60px;
    }
  }

  .gatepass-container {
    background-color: #fff;
    overflow-y: hidden;
    background: url('../../../../static/extAccess/img/fjutlogo.png') no-repeat -36vw -12vh;
  }

  .gatepass-wrap {
    border-width: 1px;
    border-color: #fff;
    border-style: dashed;
    padding: 8px 10px;
    border-radius: 3px;
  }

  .gatepass-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #00538a;
  }

  .gatepass-area {
    text-align: center;
  }

  .gatepass-card {
    // margin: 5px 5px;
    background-color: #FAFAFA;
  }

  .gatepass-grid {
    align-items: flex-start;
  }

  .gatepass-grid-item {
    background-color: #FAFAFA;
  }

  .gatepass-grid-text {
    font-size: 31rpx;
    margin-top: 4rpx;
    color: #909399;
  }

  .gatepass-grid-text-content {
    font-size: 36rpx;
    margin-top: 4rpx;
    color: #000;
    font-weight: 700;
  }
</style>